<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Q&A Interface</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 20px;
      padding: 0;
      background-color: #f4f4f9;
    }
    .container {
      max-width: 600px;
      margin: auto;
      padding: 20px;
      background: #fff;
      border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }
    #chat {
      border: 1px solid #ddd;
      padding: 10px;
      border-radius: 8px;
      max-height: 300px;
      overflow-y: auto;
      margin-bottom: 10px;
    }
    .message {
      margin: 5px 0;
    }
    .user {
      font-weight: bold;
      color: #0056b3;
    }
    .response {
      color: #333;
    }
    #question {
      width: calc(100% - 50px);
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    #submit {
      padding: 10px 15px;
      background-color: #0056b3;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    #submit:hover {
      background-color: #004494;
    }
    a {
      color: #0056b3;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>Q&A Interface</h1>
    <div id="chat"></div>
    <input type="text" id="question" placeholder="Ask your question here..." />
    <button id="submit">Submit</button>
  </div>
  <script>
    const chat = document.getElementById('chat');
    const questionInput = document.getElementById('question');
    const submitButton = document.getElementById('submit');

    // Predefined Q&A responses with full paragraphs and multi-word keywords
    const faq = [
      { 
        keywords: ['js', 'javascript', 'java script'], 
        paragraph: "JS, or JavaScript, is a programming language commonly used for web development. It's a core technology of the World Wide Web, alongside HTML and CSS. It allows developers to add interactivity and dynamic behavior to webpages. JS runs in the browser but can also be used on the server-side with technologies like Node.js.",
        link: "https://developer.mozilla.org/en-US/docs/Web/JavaScript" 
      },
      { 
        keywords: ['node.js', 'node js'], 
        paragraph: "Node.js is a runtime environment for executing JavaScript code outside the browser. It allows developers to use JavaScript to build server-side applications. Node.js is built on the V8 JavaScript engine, which makes it fast and efficient for handling I/O-heavy tasks.",
        link: "https://nodejs.org/" 
      },
      { 
        keywords: ['react.js', 'react js'], 
        paragraph: "React.js is a JavaScript library for building user interfaces, particularly for single-page applications. It allows developers to create reusable UI components and manage the state of an application efficiently. React is often used with other libraries and tools to build full-featured web apps.",
        link: "https://reactjs.org/" 
      },
      { 
        keywords: ['html'], 
        paragraph: "HTML (HyperText Markup Language) is the standard language for creating webpages. It defines the structure of web pages using a series of elements or tags, such as headings, paragraphs, links, and images. HTML provides the skeleton of a webpage that is then styled with CSS and made interactive with JavaScript.",
        link: "https://developer.mozilla.org/en-US/docs/Web/HTML" 
      },
      { 
        keywords: ['css'], 
        paragraph: "CSS (Cascading Style Sheets) is used to describe the presentation of a document written in HTML or XML. It controls the layout, color, and font of elements on a webpage. CSS makes web pages visually appealing and responsive to different screen sizes.",
        link: "https://developer.mozilla.org/en-US/docs/Web/CSS" 
      },
    ];

    function addMessage(user, text) {
      const message = document.createElement('div');
      message.classList.add('message');
      message.innerHTML = `<span class="${user}">${user === 'user' ? 'You: ' : 'Bot: '}</span>${text}`;
      chat.appendChild(message);
      chat.scrollTop = chat.scrollHeight; // Auto-scroll to the bottom
    }

    function getAnswer(question) {
      const matchedEntries = [];

      // Loop through FAQ items to find all matches
      for (const item of faq) {
        let matchCount = 0; // Track how many keywords match

        // Count occurrences of multi-word keywords in the question
        item.keywords.forEach(keyword => {
          const keywordCount = (question.match(new RegExp(`\\b${keyword}\\b`, 'gi')) || []).length; // Match the exact multi-word phrase
          matchCount += keywordCount; // Add the frequency to the match count
        });

        // If any keyword matches, store the entry along with match counts
        if (matchCount > 0) {
          matchedEntries.push({ item, matchCount });
        }
      }

      // If there are multiple matches, provide all relevant answers
      if (matchedEntries.length > 0) {
        // Sort by match count to prioritize the most relevant
        matchedEntries.sort((a, b) => b.matchCount - a.matchCount);

        // Return all relevant responses (or choose the one with the highest match)
        const responses = matchedEntries.map(entry => buildResponse(entry.item));
        return responses.join('<br><br>'); // Return multiple answers as one response
      }

      return "Sorry, I don't have an answer for that.";
    }

    function buildResponse(item) {
      let response = item.paragraph;
      if (item.link) {
        response += ` <a href="${item.link}" target="_blank">Learn more</a>`;
      }
      return response;
    }

    submitButton.addEventListener('click', () => {
      const question = questionInput.value.toLowerCase().trim();
      if (question) {
        addMessage('user', question);
        const answer = getAnswer(question);
        addMessage('response', answer);
        questionInput.value = '';
      }
    });

    questionInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') submitButton.click();
    });
  </script>
</body>
</html>
